<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap 3 按钮全家桶 | 粒子版</title>
    <!-- Bootstrap 3 CDN -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css">
    <!-- 粒子背景 -->
    <style>
        /* 让画布铺满背景 */
        #particles-js{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;}
        /* 内容置前 */
        .content{position:relative;z-index:1;}
        /* 按钮组间距 */
        .demo-row{margin:15px 0;}
    </style>
</head>
<body>
<!-- 粒子容器 -->
<div id="particles-js"></div>

<!-- 正文 -->
<div class="content">
    <div class="container">
        <h2 class="page-header text-center">🎯 Bootstrap 3 按钮速查（粒子背景版）</h2>

        <!-- 1️⃣ 可作为按钮的 3 种标签 -->
        <div class="panel panel-default">
            <div class="panel-heading"><strong>1️⃣ 能当按钮用的标签</strong></div>
            <div class="panel-body text-center">
                <a class="btn btn-default" href="#" role="button">Link</a>
                <button class="btn btn-default" type="submit">Button</button>
                <input class="btn btn-default" type="button" value="Input">
                <input class="btn btn-default" type="submit" value="Submit">
            </div>
        </div>

        <!-- 2️⃣ 预定义色板 -->
        <div class="panel panel-default">
            <div class="panel-heading"><strong>2️⃣ 预定义样式</strong></div>
            <div class="panel-body text-center">
                <button type="button" class="btn btn-default">Default</button>
                <button type="button" class="btn btn-primary">Primary</button>
                <button type="button" class="btn btn-success">Success</button>
                <button type="button" class="btn btn-info">Info</button>
                <button type="button" class="btn btn-warning">Warning</button>
                <button type="button" class="btn btn-danger">Danger</button>
                <button type="button" class="btn btn-link">Link</button>
            </div>
        </div>

        <!-- 3️⃣ 尺寸 -->
        <div class="panel panel-default">
            <div class="panel-heading"><strong>3️⃣ 尺寸变化</strong></div>
            <div class="panel-body text-center">
                <div class="demo-row">
                    <button class="btn btn-primary btn-lg">Large</button>
                    <button class="btn btn-default btn-lg">Large</button>
                </div>
                <div class="demo-row">
                    <button class="btn btn-primary">Default</button>
                    <button class="btn btn-default">Default</button>
                </div>
                <div class="demo-row">
                    <button class="btn btn-primary btn-sm">Small</button>
                    <button class="btn btn-default btn-sm">Small</button>
                </div>
                <div class="demo-row">
                    <button class="btn btn-primary btn-xs">Extra Small</button>
                    <button class="btn btn-default btn-xs">Extra Small</button>
                </div>
            </div>
        </div>

        <!-- 4️⃣ 块级 -->
        <div class="panel panel-default">
            <div class="panel-heading"><strong>4️⃣ 块级按钮</strong></div>
            <div class="panel-body">
                <button type="button" class="btn btn-primary btn-lg btn-block">Block Primary</button>
                <button type="button" class="btn btn-default btn-lg btn-block">Block Default</button>
            </div>
        </div>

        <!-- 5️⃣ 禁用 -->
        <div class="panel panel-default">
            <div class="panel-heading"><strong>5️⃣ 禁用状态</strong></div>
            <div class="panel-body text-center">
                <button type="button" class="btn btn-lg btn-primary" disabled>Disabled Primary</button>
                <button type="button" class="btn btn-default btn-lg" disabled>Disabled Default</button>
            </div>
        </div>

    </div><!-- /.container -->
</div><!-- /.content -->

<!-- particles.js -->
<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
<script>
    /* 经典星空参数 - 淡蓝科技感 */
    particlesJS('particles-js', {
        particles: {
            number: { value: 60, density: { enable: true, value_area: 800 } },
            color: { value: '#66afe9' },
            shape: { type: 'circle' },
            opacity: { value: 0.5, random: true },
            size: { value: 3, random: true },
            line_linked: {
                enable: true,
                distance: 150,
                color: '#66afe9',
                opacity: 0.4,
                width: 1
            },
            move: {
                enable: true,
                speed: 2,
                direction: 'none',
                random: true,
                straight: false,
                out_mode: 'out'
            }
        },
        interactivity: {
            detect_on: 'canvas',
            events: {
                onhover: { enable: true, mode: 'grab' },
                onclick: { enable: true, mode: 'push' },
                resize: true
            }
        }
    });
</script>
</body>
</html>
